<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息</title>
    <link rel="icon" href="/mi/imgs/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/mi/css/persional_center/personal_login.css">
    <link rel="stylesheet" href="/mi/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="/mi/css/persional_center/personal_info.css">
    <link rel="stylesheet" href="/mi/plugins/layui-v2.6.8/layui/css/layui.css">
</head>
<body>
    <div class="overall" >
        <div class="mi-header">
            <div class="title">
                <img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt="">
                <h3>小米账户</h3>
            </div>
            <div class="mi-last" style="cursor:pointer">
                <div class="last-one">
                    <a href="">用户协议</a>
                </div>
                <div class="last-one">
                    <a href="">隐私政策</a>
                </div>
                <div class="last-one">
                    <a href="">帮助中心</a>
                </div>
                <div class="last-two"></div>
                <div class="last-three">
                    <a href="">中文(简体)<i class="iconfont">&#xe68a;</i></a>
                </div>
                <div class="last-four">
                    <a href="">退出</a>
                </div>
            </div>
        </div>
        <div class="nav">
            <div class="nav-header" style="cursor:pointer">
                <div class="header-one">
                    <img id="headPic" src="${user.userImg}" alt="">
                    <div class="header-two">${user.userName}</div>
                    <div class="header-three">+86 ${user.userTelephone}</div>
                </div>
                <ul class="nav-ul">
                    <li class="nav-li">登入与安全</li>
                    <li class="nav-li">个人信息</li>
                    <li class="nav-li">隐私中心</li>
                    <li class="nav-li">绑定授权</li>
                    <li class="nav-li">帮助中心</li>
                </ul>
            </div>
            <div class="nav-middler" style="cursor:pointer">
                <div class="middler-one">
                    <div class="s"></div>
                    <span>个人信息</span>
                </div>
                <div class="m-a">
                    <div class="m-b" id="mm">
                        <div class="m-c">头像</div>
                        <div class="m-d">
                            <div class="m-e">
                                <img id="update_img" src="${user.userImg}" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3" style="width: 200px;margin: auto;height: 1px;">
                        <div class="layui-upload-drag" id="test10" style="display: none">
                            <i class="layui-icon"></i>
                            <p>点击上传，或将文件拖拽到此处</p>
                            <div class="layui-progress" lay-filter="demo">
                                <div class="layui-progress-bar" lay-percent="0%"></div>
                            </div>
                            <div class="layui-hide" id="uploadDemoView">
                                <hr>
                                <img src="" alt="上传成功后渲染" style="width: 150px;height: 150px">
                            </div>
                        </div>
                    </div>
                    <div class="m-b">
                        <div class="m-c">昵称</div>
                        <div class="m-d">
                            <div class="m-f asd" id="b1">
                                ${user.userName}
                            </div>
                            <div class="iner" id="i1">
                            <input type="text" class="i3" id="i3" value="${user.userName}">
                            <label class="btn-danger" id="error_u" style="color: red">昵称不能为空</label>
                            </div>
                        </div>
                    </div>
                    <div class="m-b">
                        <div class="m-c">性别</div>
                        <div class="m-d">
                            <div class="m-f asd" id="b2">
                                ${user.sex}
                            </div>
                            <div class="iner ccc" id="i2">
                                <input type="radio" name="sex" checked value="男">男
                                <input type="radio" name="sex" value="女">女
                            </div>
                        </div>
                    </div>
                    <div class="m-b">
                        <div class="m-c">小米ID</div>
                        <div class="m-d">
                            <div class="m-f  asd">
                               258901222
                            </div>
                        </div>
                    </div>
                    <div class="m-b">
                        <div class="m-c">银行卡</div>
                        <div class="m-d">
                            <div class="m-g">
                               点击查看
                            </div>
                            <div class="m-h">
                                <img src="" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="m-b">
                        <div class="m-c">地区/国家</div>
                        <div class="m-d">
                            <div class="m-f  asd">
                                中国
                            </div>
                        </div>
                    </div>
                    <div class="m-b">
                        <div class="m-c">&nbsp;</div>
                        <div class="m-i">
                            <div class="m-j" onclick="bianji(this)">
                                <span id="abc">编辑</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="imgSrc" value="${imgSrc}">
    <input type="hidden" id="userId" value="${user.userId}">
    <div class="floot">
        小米公司版权所有-京ICP备10046444-京公网安备11010802020134号-京ICP证110507号
    </div>
    <div class="ssss"></div>

    </div>
    <script src="/mi/plugins/jquery/jquery.min.js"></script>
    <script src="/mi/plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <script src="/mi/plugins/layui-v2.6.8/layui/layui.js"></script>

    <script type="text/javascript" src="/mi/js/personalcenter/personal_info.js"></script>
    <script>
        $(function(){
            layui.use(['upload', 'element', 'layer'], function(){
                var $ = layui.jquery
                    ,upload = layui.upload
                    ,element = layui.element
                    ,layer = layui.layer;

                //拖拽上传
                upload.render({
                    elem: '#test10'
                    ,url: '/mi/personal_center/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                    ,done: function(res){
                        layer.msg('上传成功');
                        layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', '/mi/imgs/'+res.data);
                        $("#update_img").attr("src","/mi/imgs/"+res.data);
                        $("#imgUrl").val(res.data);
                        element.progress('demo','100%');
                        console.log(res)
                    }
                });
            });
        });

    </script>
</body>
</html>